<template>
    <div class="Show">
        <div class="middle" >
            <div class="top2">
                <div>
                    <img src="../assets/img/enterImg/hydro.png" alt="" class="hydro">
                    <img src="../assets/img/enterImg/defi.png" alt="" class="defi">
                </div>
                <div class="right">
                    <img src="../assets/img/showImg/Vault.png" alt="" class="hydro" @click="open">
                    <img src="../assets/img/showImg/Farm.png" alt="" class="hydro" @click="open">
                    <img src="../assets/img/showImg/Swap.png" alt="" class="hydro" @click="open">
                    <img src="../assets/img/showImg/Lending.png" alt="" class="hydro" @click="open">
                    <img src="../assets/img/showImg/Board.png" alt="" class="hydro" @click="open">
                    <img src="../assets/img/showImg/Analytics.png" alt="" class="hydro" @click="open">
                </div>
            </div>
            <div class="middle-box">
                <div class="swiper-container" >
                    <div class="swiper-wrapper" >
                        <div class="swiper-slide">
                            <img src="../assets/img/showImg/box1.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="../assets/img/showImg/box2.png" alt="">
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                    <div class="swiper-button-prev">
                        <img src="../assets/img/showImg/left.png" alt="">
                    </div>
                    <div class="swiper-button-next">
                        <img src="../assets/img/showImg/right.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <bottom></bottom>
    </div>
</template>

<script>
    import Swiper from 'swiper';
    import "swiper/css/swiper.css"
    import bottom from './bottom'
    export default {
        name: "show",
        components:{
            bottom
        },
        data(){
            return{
                imgArry:[
                    require('../assets/img/showImg/box1.png'),
                    require('../assets/img/showImg/box2.png'),
                ],
                index:0,
                timer: null,
            }
        },
        methods:{
            leftimg(){
                if(this.index<=0){
                    this.index = this.imgArry.length-1
                }else{
                    this.index--
                }
            },
            rightimg(){
                if(this.index>=this.imgArry.length-1){
                    this.index = 0
                }else{
                    this.index++
                }
            },
            changeIndex(){
                if(this.index>=this.imgArry.length-1){
                   this.index = 0
                }else{
                    this.index++
                }
            },
            open(){
                this.$alert('coming soon', 'Tips', {
                    confirmButtonText: 'Yes',
                    confirmButtonClass: 'btnt'
                });
            },
        },
        mounted() {
            new Swiper ('.swiper-container', {
                slidesPerView : 1,
                centeredSlides : true,
                loop : true,
                autoplay:true,
                pagination: {
                    el: '.swiper-pagination',
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                    // hideOnClick: true,
                },
            })
        },
    }
</script>

<style lang="less">
    .btnt{
        background: rgb(246,206,97) !important;
        color: black !important;
        border: none !important;
    }
    .Show{
        position: absolute;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle, #3F5767 0%, #202C34 100%) ;
        opacity: 1;
        display: flex;
        flex-direction: column;
        align-items: center;

        .middle{
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1;
            .top2{
                align-items: center;
                height: 84px;
                width: 1200px;
                display: flex;
                justify-content: space-between;
                .defi{
                    margin-left: 12px;
                }
                .right{
                    width: 485px;
                    display: flex;
                    justify-content: space-between;
                    img{
                        height: 16px;
                    }
                }
            }
            .middle-box{
                width: 1500px;
                margin-top: 124px;
                .swiper-container {
                    width: 1200px;
                    height: 557px;
                }
                .left{
                    width: 86px;
                    height: 86px;
                }
                .right{
                    width: 86px;
                    height: 86px;
                }
            }
        }
        .bottom{
            height: 84px;
            width: 1200px;
            display: flex;
            align-items: center;
            .ico{
                width: 192px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-left: 445px;
            }
        }

    }

</style>
